<template>
  <slide-view-single :listener-ids="listenerIDs" :no-listener-ids="noListenerIDs"
                     :no-listener-class="noListenerClass"
                     :body-style="{padding: 0, height: '100%'}"
                     class="d-view"
                     @close="hideView">
    <flexbox class="t-section">
      <img :src="crmIcon" class="t-img">
      <div class="t-name">跟进记录</div>
    </flexbox>
    <div class="t-content">
      <div v-infinite-scroll="getList" :key="scrollKey"
           infinite-scroll-disabled="scrollDisabled"
           infinite-scroll-distance="100">
        <log-cell v-for="(item, index) in list" :item="item" :index="index" :key="index"
                  :can-delete="false"
                  @crm-detail="checkRelationDetail">
          <div class="relate-cell"
               @click="checkRelationDetail(item.activityType, item.activityTypeId, true)">
            <i :class="item.activityType | crmIconClass" class="relate-cell-icon"/>
            <span class="relate-cell-type">{{ item.activityType | crmName }}-</span>
            <span class="relate-cell-name">{{ item.crmTypeName }}</span>
          </div>
        </log-cell>
      </div>
      <p v-if="loading" class="scroll-bottom-tips">加载中...</p>
      <p v-if="noMore" class="scroll-bottom-tips">没有更多了</p>
    </div>


    <c-r-m-full-screen-detail :visible.sync="showFullDetail" :crm-type="relationCrmType" :id="relationID"/>

  </slide-view-single>
</template>


<script setup>
import LogCell from '/src/views/crm/componentsNew/ActivityNew/LogCell.vue'

import crmTypeModel from '/src/views/crm/model/crmTypeModel.js'
import {defineAsyncComponent} from "vue";
import SlideViewSingle from "@/views/crm/componentsNew/SzCrud/SlideView.vue";
import CRMFullScreenDetail from "/src/components/CRMFullScreenDetail.vue"

defineOptions({
  /** 跟进记录列表 */
  name: 'RecordList',
})


function crmIconClass(type) {
  return `wk wk-${crmTypeModel.convertTypeToKey(type)}`
}

function crmName(type) {
  return crmTypeModel.convertTypeToName(type)
}

const props = defineProps({
  crmType: String,
  request: Function,
  params: Object,
  // 监听的dom 进行隐藏详情
  listenerIDs: {
    type: Array,
    default: () => {
      return ['crm-main-container']
    }
  },
  // 不监听
  noListenerIDs: {
    type: Array,
    default: () => {
      return []
    }
  },
  noListenerClass: {
    type: Array,
    default: () => {
      return ['el-table__body']
    }
  }
})


watch(() => props.params, () => {
  refreshList()
})


const loading = ref(false)

// 判断是否发请求
const page = ref(1)
const noMore = ref(false)
const list = ref([])
const scrollKey = ref(Date.now())
// 查看相关客户管理详情
const showFullDetail = ref(false)
// 相关ID参数
const relationID = ref('')
// 相关类型
const relationCrmType = ref('')

const optionData = reactive({
  loading, page, noMore, list, scrollKey, showFullDetail, relationID, relationCrmType
})


const crmIcon = computed(() => {
  const crmType = props.crmType.replace('crm_', '')

  return import(`../../../../../../../assets/img/crm/${crmType}.png`)
})

const scrollDisabled = computed(() => {
  return optionData.loading || optionData.noMore
})


function refreshList() {
  optionData.page = 1
  optionData.list = []
  optionData.noMore = false
  optionData.scrollKey = Date.now()
}

/**
 * 获取列表
 */
function getList() {
  optionData.loading = true
  props.request({page: optionData.page, limit: 15, ...props.params}).then(res => {
    optionData.page++
    optionData.list = optionData.list.concat(res.data.list)
    optionData.noMore = res.data.lastPage
    optionData.loading = false
  }).catch(() => {
    optionData.noMore = true
    optionData.loading = false
  })
}

/**
 * 查看相关客户管理详情
 */
function checkRelationDetail(type, id, convert = false) {
  optionData.relationID = id
  optionData.relationCrmType = convert ? crmTypeModel.convertTypeToKey(type) : type
  optionData.showFullDetail = true
}

const emits = defineEmits('hide')

/**
 * 点击关闭按钮隐藏视图
 */
function hideView() {
  emits('hide')
}
</script>

<style lang="scss" scoped>
.t-section {
  position: relative;
  padding: 10px 17px;
  min-height: 60px;
  line-height: 40px;

  .t-img {
    display: block;
    width: 35px;
    height: 35px;
    margin-right: 10px;
  }

  .t-name {
    font-size: 14px;
    color: #333333;
    flex: 1;
  }

  .t-close {
    display: block;
    float: right;
    width: 40px;
    height: 40px;
    margin-left: 20px;
    padding: 10px;
    cursor: pointer;
  }
}


.d-view {
  position: fixed;
  width: 950px;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: white;
}

.t-content {
  margin: 0 30px;
  height: calc(100% - 80px);
  overflow: auto;
  position: relative;
}

.relate-cell {
  padding: 8px;
  margin-left: 40px;
  background-color: #f5f7fa;
  border-radius: 4px;
  position: relative;
  width: auto;
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: #333;

  &-icon {
    display: inline-block;
    font-size: 14px;
    color: #666;
    margin-right: 5px;
  }

  &-name {
    cursor: pointer;
    color: $xr-color-primary;
  }

  &-name:hover {
    text-decoration: underline;
  }
}

</style>
